import React from 'react';


import classnames from 'classnames';
//component
import ReModal from '../ReModal';
import ReIcon from '../ReIcon';

import './index.less';


export default class view extends React.Component {
    static propTypes = {
        open: React.PropTypes.bool,
        list: React.PropTypes.array,
        onClick: React.PropTypes.func
    };

    static defaultProps = {
        onClick: () => {}
    };


    constructor(props, context) {

        super(props, context);


        // init state;
        this.state = {

        };
    }
    componentWillMount() {
        this._isMounted = true;

    }

    componentDidMount() {

    }

    componentWillUnmount() {
        this._isMounted = false;
    }

    handleClick(e, index) {
        this.props.onClick(e, this.props.list[index]);
    }

    render() {

        const classNames = classnames({
            'orin-sw-retabdialog-root': true,
            [this.props.className]: this.props.className ? true : false
        });

        return (
            <div className={classNames}>
                <ReModal open={this.props.open}>
                    <ul className="tabs-dialog">
                        {this.props.list.map((item, i) =>  {
                            return (
                                <li key={i}
                                    onTouchTap={(e) => this.handleClick(e, i)}>
                                    <ReIcon icon={item.icon} />
                                    <p>{item.label}</p>
                                </li>
                            )
                        })}
                    </ul>
                </ReModal>
            </div>
        );
    }
}
